<!--
 * @Author: kangjia kjhangzhou@163.com
 * @Date: 2022-09-29 09:57:51
 * @LastEditors: kangjia kjhangzhou@163.com
 * @LastEditTime: 2022-09-29 10:08:18
 * @FilePath: \boss-web-applet\pages\service\introduce\module\pmsOrVoesAction.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="flex margin-bottom-sm">
		<view v-for="(item,i) in list" :key="i" class="flex-sub  radius">
			<view classa="flex flex-direction">
				<view :class="item.class">
					<template v-if="list.length==3">
						<button class="cu-btn bg-whites" :data-code="pointList[i].code" :data-eventName="pointList[i].dataEventName" style="font-size:24upx;width:96%;position: relative;height:80upx" @tap="handleClick(item)">
							<image class="text-left" :src="`https://statics.xmcsrv.net/weixin/cloud/action/${item.icon}.svg`" mode="aspectFit" style="width:60upx;height:52upx;position: absolute;left:10upx"></image>
						<text class="margin-left-lg">{{item.name}}</text>
						</button>
					</template>
					<template v-else>
						<view class="flex-sub radius">
							<view class="flex flex-direction" :class="i==0 ? 'padding-right-sm':'padding-left-sm'" @tap="handleClick(item)">
								<button class="cu-btn bg-whites lg" style="position: relative;font-size:28upx;height:80upx">
									<image class="text-left" :src="`https://statics.xmcsrv.net/weixin/cloud/action/${item.icon}.svg`" mode="aspectFit" style="width:60upx;height:52upx;position: absolute;left:20upx"></image>
								<text class="margin-left-lg">{{item.name}}</text>
								</button>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>	
export default {
	props:{
		// 设备列表
		list:{
			type:Array,
			default:()=>{
				return []
			}
		},
		message:{
			type:Object,
			default:()=>{
				return{}
			}
		}
	},
    data() {
	    return {
				pointList:[{code:'603050',dataEventName:'introduce_xmcVoes_setPhones'},{code:'603051',dataEventName:'introduce_xmcVoes_record'},{code:'603052',dataEventName:'introduce_xmcVoes_alarmSettings'}],
				selectDeviceInfo:{}
		}
	},
	watch: {
		message:{
			handler(newVal) {
				this.selectDeviceInfo = newVal;
			},
			immediate: true,
			deep: true
		}
		
	},
	onShow() {
	},
	methods: {
		handleClick(item){
			console.log('type ===========',item);
			const { icon, type } = item;
			const {devId,devName,u,p,adminToken,userGroupId,roomId,devIcon} = this.selectDeviceInfo;
			this.$routing(`${this.$pages[icon]}?sn=${devId}&type=${type}&devName=${devName}&u=${u}&p=${p}&adminToken=${adminToken}&userGroupId=${userGroupId}&roomId=${roomId}&devIcon=${devIcon}&alarmEnable=false`)
		},
	}
}
</script>
	
<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
